Card Component

This is a set of React components that provide a consistent and styled card layout for displaying content in a Docusaurus project. The components are designed to work with Markdown content, allowing you to easily create cards with rich text formatting.

What does this MDX Component do?

The Card component serves as the base container for the card layout. It provides styling for a rounded border, background color, and a shadow effect. The CardHeader component is used for rendering the card's header section, which typically includes a title and description. The CardTitle component renders the card's title, and it supports Markdown formatting by processing the provided children string through a Markdown processor. The CardDescription component renders the card's description as plain text.

The CardContent component is used to wrap the main content of the card, allowing you to include any React elements or Markdown-formatted text within it. The CardFooter component is designed to hold additional content or actions related to the card, such as buttons or links.

Finally, the DevDocsCard component combines all the individual components into a single, reusable card component. It accepts props for the title, description, and footer content, and renders the card with the provided children as the main content.

Copy the Code into Your Components Folder

import * as React from "react";
import { unified } from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import rehype2react from 'rehype-react';

import { cn } from "@site/src/utils"

const processor = unified()
  .use(markdown)
  .use(remark2rehype)
  .use(rehype2react, { createElement: React.createElement });

const Card = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
    {...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props} />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef(({ className, children, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
    {...props}>
      {processor.processSync(children).result}
  </h3>
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef(({ className, children, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}>
      {children}
    </p>
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props}>
    {children}
  </div>

))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef(({ className, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}>
      {children}
  </div>

))
CardFooter.displayName = "CardFooter"

const processChildren = (children) => {
  const processedChildren = React.Children.toArray(children).map((child) => {
    if (typeof child === 'string') {
      const singleLineString = child.replace(/\\n/g, '\\\\n');
      return mdProcessor.processSync(singleLineString).result;
    } else {
      return child;
    }
  });

  return processedChildren;
};

const DevDocsCard = React.forwardRef(({ className, children, ...props }, ref) => (
  <Card>
    <CardHeader>
        <CardTitle>
          {props.title}
        </CardTitle>
        <CardDescription>
          {props.description}
        </CardDescription>
    </CardHeader>
    <CardContent>
      {processChildren(children)}
    </CardContent>
    <CardFooter>
      {props.footer}
    </CardFooter>
</Card>
))

export { DevDocsCard, Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 

Npm Libraries and Install Instructions

This code utilizes the following npm libraries:

• unified: A library for creating and orchestrating parsers and transformers for content.
• remark-parse: A Markdown parser plugin for unified.
• remark-rehype: A plugin for unified that transforms Markdown to HTML.
• rehype-react: A plugin for unified that transforms HTML to React elements.

To install these libraries, run the following command:

npm install unified remark-parse remark-rehype rehype-react

Use Component in your Markdown file

Card Title

Card description goes here.

Markdown Content

This is the main content of the card, and it supports Markdown formatting.

Link to more Information

In this example, the DevDocsCard component is used with the following props:

• title: The title of the card, which will be rendered with Markdown formatting.
• description: A plain text description for the card.
• footer: Additional content or actions to be displayed in the card's footer section. In this example, it's a link.

The children of the DevDocsCard component should contain the main content of the card, which can be written in Markdown format.

Why and How:

This set of components provides a consistent and reusable way to display content in a card layout within your Docusaurus project. By using these components, you can easily create visually appealing cards with rich text formatting, headers, descriptions, and additional content or actions.

The Card component serves as the base container, providing the styling and layout for the card. The CardHeader component allows you to display a title and description at the top of the card, with the CardTitle component supporting Markdown formatting for the title.

The CardContent component is where you can place the main content of the card, which can be written in Markdown format. This allows you to easily create rich text content with headings, lists, code blocks, and other formatting options.

Finally, the CardFooter component provides a space to add additional content or actions related to the card, such as links or buttons.

The DevDocsCard component combines all these individual components into a single, reusable component that you can easily include in your Markdown files. By using this component, you can ensure a consistent look and feel across your documentation, while still allowing for flexibility in the content and layout of each card.